<template>
    <div class="login-container">
        <div class="login">
            <div class="left">
                <img src="@/assets/ats2.png" alt="" />
                <h1>活动任务管理系统</h1>
            </div>
            <div class="right">
                <div class="font">
                    <h1>您好</h1>
                    <h2>欢迎登陆活动任务管理系统</h2>
                </div>
                <div class="form">
                    <el-form
                        ref="formRef"
                        label-position="right"
                        :model="form"
                        :rules="rules"
                    >
                        <el-form-item prop="username">
                            <el-input
                                v-model="form.username"
                                :prefix-icon="User"
                                placeholder="请输入您的账户"
                            />
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input
                                v-model="form.password"
                                :prefix-icon="Lock"
                                placeholder="请输入您的密码"
                                type="password"
                                :show-password="true"
                            />
                        </el-form-item>
                        <el-form-item prop="code">
                            <el-input
                                v-model="form.code"
                                :prefix-icon="ChatDotRound"
                                placeholder="请输入验证码"
                                style="width: 202px"
                            />
                        </el-form-item>
                        <div class="login-code">
                            <img :src="codeUrl" @click="getCode" />
                        </div>
                        <el-form-item>
                            <el-button
                                type="primary"
                                style="width: 100%"
                                @click.prevent="handleLogin(formRef)"
                                ><span v-if="!loading">登 录</span>
                                <span v-else>登 录 中...</span></el-button
                            >
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onBeforeMount, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import storage from '@/utils/storage';

import { getCodeImg, login } from '@/request/login';
import { User, Lock, ChatDotRound } from '@element-plus/icons-vue';
import type { FormInstance, FormRules } from 'element-plus';
import { userStore } from '@/store/user';

const user = userStore();
const formRef = ref<FormInstance>();
const codeUrl = ref<string>('');
const loading = ref<boolean>(false);
const redirect = ref<any>(null);
const otherQuery = ref<any>({});
const form = reactive({
    username: '',
    password: '',
    code: '',
    uuid: '',
    rememberMe: false,
});
const rules = reactive<FormRules>({
    username: [
        {
            required: true,
            trigger: 'blur',
            message: '用户名不能为空',
        },
    ],
    password: [
        {
            required: true,
            trigger: 'blur',
            message: '密码不能为空',
        },
    ],
    code: [
        {
            required: true,
            trigger: 'change',
            message: '验证码不能为空',
        },
    ],
});
const router = useRouter();
const route = useRoute();
// 监听
watch(route, (route) => {
    const query = route.query;
    console.log('监听路由', route);
    if (query) {
        redirect.value = query.redirect;
        otherQuery.value = getOtherQuery(query);
    }
});
// 获取验证码
const getCode = () => {
    getCodeImg().then((res) => {
        if (res.code === 200) {
            codeUrl.value = res.data;
            form.uuid = res.id;
        }
    });
};
const handleLogin = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            loading.value = true;
            login(form)
                .then((res) => {
                    if (res.code === 200) {
                        // 登陆成功,设置token到pinia中
                        user.setToken(res.data);
                        // 设置token到strong中
                        storage.set('token', res.token);
                        router.push({
                            path: redirect.value || '/',
                            query: otherQuery.value,
                        });
                    }
                })
                .finally(() => {
                    loading.value = false;
                });
        } else {
            console.log('error submit!');
            return false;
        }
    });
};
const getOtherQuery = (query: any) => {
    return Object.keys(query).reduce((acc: any, cur) => {
        if (cur !== 'redirect') {
            acc[cur] = query[cur];
        }
        return acc;
    }, {});
};
onBeforeMount(() => {
    getCode();
});
</script>
<style lang="scss" scoped>
.login-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: url('../../assets/login.png') no-repeat;
    background-color: #0e6cff;
    position: relative;
    background-size: cover;
    height: 100vh;
    background-position: 50%;
    .login {
        width: 1192px;
        height: 692px;
        border-radius: 6px;
        margin: 0 auto;
        overflow: hidden;
        .left {
            height: 692px;
            width: 50%;
            opacity: 1;
            border-radius: 8px 0px, 0px, 8px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            float: left;
            img {
                max-height: 76px;
                margin: 144px 0 0 170px;
            }
            h1 {
                font-size: 56px;
                font-weight: 600;
                letter-spacing: 0px;
                color: rgba(255, 255, 255, 1);
                margin: 10px 0 0 60px;
                line-height: 90px;
            }
        }
        .right {
            width: 50%;
            float: right;
            height: 692px;
            border-radius: 0px 8px, 8px, 0px;
            background: rgba(255, 255, 255, 1);
            .font {
                overflow: hidden;
                h1 {
                    font-size: 36px;
                    font-weight: 600;
                    color: rgba(29, 33, 41, 1);
                    text-align: left;
                    margin: 144px 0 0 138px;
                }
                h2 {
                    font-size: 20px;
                    font-weight: 500;
                    color: rgba(201, 205, 212, 1);
                    text-align: left;
                    vertical-align: top;
                    margin: 20px 0 0 138px;
                }
            }
            .form {
                overflow: hidden;
                width: 320px;
                margin: 20px 0 0 138px;
                position: relative;
                .login-code {
                    margin-top: -50px;
                    width: 30%;
                    height: 30px;
                    float: right;
                    border: 1px solid rgba(0, 0, 0, 0.1);
                    border-radius: 5px;
                    z-index: 2;
                    position: absolute;
                    right: 0;
                    bottom: 68px;
                    img {
                        height: 34px;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
</style>
<style lang="scss">
// .login-container {
//     .el-input__wrapper {
//         height: 48px;
//     }
// }
</style>
